import { VC } from '@/VC-vue'
import { Component } from 'vue-property-decorator'
import { ModalGenerator } from '@/components/Modal'
import { createFormModal } from '@/components/Modal/createModal'
import { createLoading } from '@/components/Loading/createLoading'
import { ListPage } from '@/components/ListPage'
import { getList } from '@/services/list'
import { BaseLayout, Title } from '@/components/Container'
import { FormUtils } from '@/types/form-ref'

@Component({})
export default class SearchTable extends VC {
    render() {
        return (
            <BaseLayout breadcrumb>
                <Title title="复杂列表" />
                <ListPage
                    fetch={getList}
                    //   query={getList}
                    actions={this.actions}
                    searchItems={[
                        { label: '搜索1', field: 's1' },
                        { label: '搜索2', field: 's2' },
                        { label: '搜索3', field: 's3' },
                        { label: '搜索4', field: 's4' },
                        {
                            label: '搜索5',
                            field: 's5',
                            el: (form: FormUtils) => {
                                return (
                                    <a-select>
                                        <a-select-option value="jack">
                                            Jack
                                        </a-select-option>
                                        <a-select-option value="lucy">
                                            Lucy
                                        </a-select-option>
                                        <a-select-option value="Yiminghe">
                                            yiminghe
                                        </a-select-option>
                                    </a-select>
                                )
                            }
                        }
                    ]}
                    columns={[
                        {
                            title: '名称',
                            dataIndex: 'name'
                        },
                        {
                            title: '电话',
                            dataIndex: 'tel'
                        },
                        {
                            title: '描述',
                            dataIndex: 'address'
                        },
                        {
                            title: '操作',
                            dataIndex: 'handle',
                            customRender: (data, record, text) => (
                                <span>
                                    <a
                                        onclick={this.handleEdit.bind(
                                            this,
                                            record
                                        )}
                                    >
                                        {' '}
                                        编辑
                                    </a>
                                    <a-divider type="vertical" />
                                    <a onclick={this.handleDetail}>更多</a>
                                </span>
                            )
                        }
                    ]}
                />
            </BaseLayout>
        )
    }

    handleEdit(record) {
        const options = {
            title: '创建弹窗',
            labelCol: { span: 5 },
            wrapperCol: { span: 16 },
            fetch: v => {
                this.$info({
                    title: '表单值',
                    content: JSON.stringify(v.params)
                })
                return new Promise(r => r())
            },
            itemList: [
                {
                    wrapperCol: { offset: 5, span: 14 },
                    el: <Title> 输入后点击确定取表单内容。 </Title>
                },
                {
                    field: 'name',
                    label: '名称'
                },
                {
                    field: 'age',
                    label: '年龄'
                }
            ]
        }
        createFormModal(options)
    }
    handleDetail() {
        const loading = createLoading({ loadingText: '加载中' })
        setTimeout(() => {
            loading.close()
        }, 3000)
    }
    /** 操作按钮数组VNode  */
    actions(v: ListPage) {
        return [
            <div>
                <ModalGenerator
                    title="新建"
                    btn="新建"
                    labelCol={{ span: 5 }}
                    wrapperCol={{ span: 16 }}
                    fetch={() => this.Axios.get("")}
                    itemList={[
                        { label: "角色名称", field: "roleName" },
                        { label: "角色描述", field: "roleDesc" }
                    ]}
                />
                <ModalGenerator
                    title="导出"
                    btn="导出"
                    labelCol={{ span: 5 }}
                    wrapperCol={{ span: 16 }}
                    fetch={() => this.Axios.get("")}
                    itemList={[
                        { label: "搜索1", field: "s1" },
                        { label: "搜索2", field: "s2" }
                    ]}
                />
            </div>
        ];
    }
}
